<script>
import { logout } from '../js/login';

export default {
  name: "TabBarFrom",
  methods: {
    handleLogout() {
      logout(); // 调用logout函数清除用户信息
      this.$router.push('/login'); // 然后重定向到登录页面
    },
    handleHome(){
      this.$router.push('/home');
    },
    handlefinished(){
      this.$router.push('/finished');
    }

  }
};
</script>

<template>
  <div class="tab-bar">
    <div class="table-item" @click="handleHome">
      <div><img src="../../public/todo.png" style="width: 20px;height: 20px"></div>
<!--      <router-link to="/home">待办</router-link>-->
      <span>待办</span>
    </div>
    <div class="table-item" @click="handlefinished">
      <div><img src="../../public/finished.png" style="width: 20px;height: 20px"></div>
<!--      <router-link to="/finished">已办</router-link>-->
      <span>已办</span>
    </div>
    <div class="table-item" @click="handleLogout">
      <div><img src="../../public/logout.png" style="width: 20px;height: 20px"></div>
<!--      <a href="javascript:void(0)">退出登录</a>-->
      <span>退出登录</span>
    </div>


  </div>
</template>

<style scoped>
.tab-bar {
  position: absolute;
  bottom:110px;
  width: 366px;
  display: flex;
  height: 50px;
  background-color: #b3f0c8;
  border-top: 1px solid #e0e0e0;
}
.table-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #888;
  text-decoration: none;
  transition: color 0.2s;
}
</style>